<template>
  <el-drawer v-model="drawer" :with-header="false" @close="close" :append-to-body="true" :size="drawerSize" ref="drawerRef" class="customer-detail-drawer">
    <div class="customer-detail" ref="customerDetail">
      <div class="company-data">
        <h3 class="company-title">{{ customerData.intactName }}</h3>
        <el-row justify="center" style="margin-top:5px;">
          <div class="tips-cell">
            <span class="tips">部门</span>
            <span class="tips-data gery">{{ customerData.deptName }}</span>
          </div>
          <div class="tips-cell">
            <span class="tips">客户经理</span>
            <span class="tips-data tips-hover gery" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap" @click="managerVisible = true">{{ customerData.managerNames }}</span>
          </div>
          <div class="tips-cell">
            <el-icon color="var(--next-bg-topBarColor)">
              <ele-Calendar/>
            </el-icon>
            <span class="tips">开始行动时间</span>
            <span class="tips-data gery">{{ customerData.followTime || '-' }}</span>
          </div>
          <div class="tips-cell">
            <span class="tips">跟进天数</span>
            <span class="tips-data black">{{ customerData.followDays || '-' }}天</span>
          </div>
          <div class="tips-cell">
            <span class="tips">更新</span>
            <span class="tips-data black">今天</span>
          </div>
          <div class="tips-cell tips-hover" @click="jumpContact">
            <span class="tips">主要联系人</span>
            <span class="tips-data black">{{ customerData.contact ? customerData.contact.name || '-' : '-' }}</span>
          </div>
          <div class="tips-cell" @click="jumpContact">
            <span class="tips">手机号</span>
            <span class="tips-data black">{{ customerData.contact ? customerData.contact.phone || '-' : '-' }}</span>
          </div>
          <div class="tips-cell" @click="jumpUserLabel">
            <el-link :underline="false">用户画像</el-link>
          </div>
          <div class="tips-cell" @click="jumpSales">
            <el-link :underline="false">销售费用</el-link>
          </div>
          <div class="tips-cell" title="解绑当前客户" @click="unbind">
            <el-link :underline="false" class="tips-hover">解除捆绑</el-link>
          </div>
        </el-row>
      </div>
      <!--  机会信息  -->
      <el-card :body-style="{ padding: `8px 10px` }" style="margin-top: 5px">
        <el-row>
          <el-button size="small" :icon="Plus" type="primary" @click="openOpportunity(null)">添加机会</el-button>
          <el-icon :title="opportunityParams.sort == 0 ? '创建时间顺序' : '创建时间倒序'" :size="18" style="cursor: pointer;margin-left: 15px;height: 24px;font-weight: bold" :class="[opportunityParams.sort == 0 ? 'asc-color' : 'desc-color']" @click="changeOpportunitySort">
            <ele-Sort/>
          </el-icon>
        </el-row>
        <!--  机会展示列表  -->
        <div class="stage-row" v-for="(item, index) in opportunityList" :key="item.id">
          <div class="col-cell opportunity-wrapper" style="width: 210px">
            <el-row style="margin-bottom: 10px">
              <el-icon :size="16" style="margin: 2px 7px 0 0; cursor: pointer" @click.stop="openOpportunity(item)" color="var(--el-text-color-secondary)">
                <ele-Edit/>
              </el-icon>

              <!--                            <el-select v-model="item.productLineId"-->
              <!--                                        placeholder="暂无产品名称"-->
              <!--                                       size="small"-->
              <!--                                       style="width:160px;">-->
              <!--                                    <el-option-->
              <!--                                        v-for="line in productLineList"-->
              <!--                                        :key="line.id"-->
              <!--                                        :label="line.name"-->
              <!--                                        :value="line.id"/>-->
              <!--                            </el-select>-->
              <p class="col-opportunity" style="cursor: pointer" @click="openOpportunity(item)">{{ item.productLineName || '暂无产品名称' }}</p>
              <!--                            <el-tag size="small">产品{{ index + 1 }}</el-tag>-->
              <el-tag size="small">{{ '机会' + (index + 1) }}</el-tag>
            </el-row>
            <el-row>
              <div>
                <el-row align="middle" style="height:unset;margin-bottom:5px;">
                  <span class="small-tips">签约可能性(%)</span>
                  <el-input-number v-model="item.probability" @change="editOpportunity(item)" :min="1" :max="100" :controls="false" size="small" style="width:112px"/>
                </el-row>
                <el-row align="middle" style="height:unset;margin-bottom:5px;">
                  <span class="small-tips">{{ item.probability == 100 ? '实际' : '预估' }}签约日期</span>
                  <el-date-picker v-model="item.signDate"
                                  type="date"
                                  :clearable="false"
                                  format="YYYY-MM-DD"
                                  value-format="YYYY-MM-DD"
                                  @change="editOpportunity(item)"
                                  :disabled-date="disabledDate"
                                  placeholder="请选择"
                                  size="small"
                                  style="width:120px;"/>
                </el-row>
                <el-row align="middle" style="height:unset;">
                  <span class="small-tips">{{ item.probability == 100 ? '实际' : '预估' }}签约金额(元)</span>
                  <el-input-number v-model="item.signAmount" :min="0" @change="editOpportunity(item)" :controls="false" size="small" style="width: 100px"/>
                </el-row>
              </div>
            </el-row>
          </div>
          <div class="col-container">
            <el-row style="height: 100%">
              <!--              <div class="stage-list">-->
              <!--                <el-row style="margin-top:-5px">-->
              <span style="display: grid;align-items: center">跟进阶段</span>
              <tree-line v-if="item.stageLine" :data="item.stageLine" :active="item.stageId" style="margin-top:0;flex:1" @getItem="toStage($event, item)"/>
              <!--                </el-row>-->
              <!--                <el-row v-if="item.orderStage" style="margin-top: 8px">-->
              <!--                    <span style="padding-top:12px;">订单阶段</span>-->
              <!--                    <tree-line :data="item.orderStage" :active="item.orderActive" style="flex:1" @getItem="getOrderStatus($event, index)"/>-->
              <!--                </el-row>-->
              <!--              </div>-->
            </el-row>
          </div>
          <el-divider
              style="margin-bottom: 0;margin-top:14px;"
              v-if="index < opportunityList.length - 1"/>
        </div>
      </el-card>

      <div class="page-list">
        <div class="left-container">
          <el-card :body-style="{ padding: `8px 10px` }">
            <div class="card-item card-action" style="margin-bottom:10px;">
              <el-row style="margin-top:10px;">
                <span>最近操作</span>
              </el-row>
              <el-row>
                <el-tag v-for="matter in recentList" :key="matter.code" size="small" style="margin-right:10px;margin-top:10px;">{{ matter.name }}</el-tag>
                <span class="arrow" @click="matterVisible = true">
                  <el-icon><ele-CirclePlusFilled/></el-icon>
                  <!--                  <el-popover placement="right-start" :width="320" trigger="hover" popper-class="action-popper">-->
                  <!--                    <template #reference>-->
                  <!--                      <el-icon><ele-CirclePlusFilled/></el-icon>-->
                  <!--                    </template>-->
                  <!--                    <div style="position:relative;z-index:2;">-->
                  <!--                      <h5 class="sale-title">售前阶段</h5>-->
                  <!--                      <el-tag v-for="(item, index) in beforeSales" :key="item.id" size="small" style="margin-right:10px;margin-top:10px;cursor: pointer;">Tag {{ index + 1 }}</el-tag>-->
                  <!--                      <el-divider border-style="dotted" style="margin: 10px 0"/>-->
                  <!--                      <h5 class="sale-title">售中阶段</h5>-->
                  <!--                      <el-tag v-for="(item, index) in centerSales" :key="item.id" size="small" style="margin-right:10px;margin-top:10px;cursor: pointer;">Tag {{ index + 1 }}</el-tag>-->
                  <!--                      <el-divider border-style="dotted" style="margin: 10px 0"/>-->
                  <!--                      <h5 class="sale-title">售后阶段</h5>-->
                  <!--                      <el-tag v-for="(item, index) in afterSales" :key="item.id" size="small" style="margin-right:10px;margin-top:10px;cursor: pointer;">Tag {{ index + 1 }}</el-tag>-->
                  <!--                    </div>-->
                  <!--                  </el-popover>-->
              </span>
              </el-row>
            </div>
            <div class="refLine">
              <el-divider border-style="dotted" style="margin:0 0 8px;"/>
            </div>
            <div class="card-item">
              <el-row justify="space-between">
                <div class="title">
                  <span>成交评估</span>
                  <el-icon :size="16" style="margin-left: 5px;cursor:pointer" color="var(--el-text-color-secondary)" @click="dialogEvaluation = true">
                    <ele-Setting/>
                  </el-icon>
                </div>
              </el-row>
              <template v-if="evaluationList.length > 0">
                <el-row style="margin-top:10px;align-items:center;flex-wrap:nowrap;" v-for="item in evaluationList" :key="item.id">
                  <el-tag size="small" style="margin-right:10px;max-width:50%">
                    <!--                    <el-tooltip effect="dark" :content="item.name" placement="top">-->
                    <span class="tag-name">{{ item.name }}</span>
                    <!--                    </el-tooltip>-->
                  </el-tag>
                  <el-rate v-model="item.rate" size="small" @change="evaluationChange(item)"/>
                </el-row>
              </template>
              <template v-else>
                <el-empty style="padding: 0;font-size:12px;" :image-size="50" description="无数据"/>
                <!--                <div class="my-empty">-->
                <!--                  <p>-->
                <!--                    <span>暂无</span>-->
                <!--                    <span>成交评估</span>-->
                <!--                  </p>-->
                <!--                </div>-->
              </template>
            </div>
          </el-card>
          <el-card :body-style="{ padding: `8px 10px` }" style="margin-top:10px;">
            <el-row justify="space-between">
              <div class="title">
                <span>实时签约数据统计</span>
              </div>
              <el-row style="align-items:center;">
                <span style="margin-right:5px;font-size:12px;">币种选择</span>
                <el-select v-model="customerData.currency" placeholder="请选择" size="small" style="width:100px" clearable filterable>
                  <el-option v-for="item in dictMap['MoneyCurrency']" :key="item.value" :label="item.name" :value="item.value"/>
                </el-select>
              </el-row>
            </el-row>
            <el-row justify="center" style="width:100%;margin-top:10px;">
              <el-form size="small" label-width="100px">
                <el-form-item label="累计订单金额">
                  <el-input-number v-model="customerData.orderAmount" :min="0" :controls="false" size="small"/>
                </el-form-item>
                <el-form-item label="累计回款金额">
                  <el-input-number v-model="customerData.returnAmount" :min="0" :controls="false" size="small"/>
                </el-form-item>
                <el-form-item label="应收账款">{{ customerData.orderAmount - customerData.returnAmount }}</el-form-item>
                <el-form-item>
                  <el-button size="small" type="primary">保存</el-button>
                </el-form-item>
              </el-form>
            </el-row>
          </el-card>
          <el-card :body-style="{ padding: `8px 10px` }" style="margin-top:10px;">
            <div class="card-item">
              <div class="title">
                <span>基础信息</span>
                <el-icon :size="16" title="编辑" style="margin-left: 5px;cursor:pointer" color="var(--el-text-color-secondary)" @click="customerVisible = true">
                  <ele-Edit/>
                </el-icon>
              </div>
              <div class="card-center">
                <!--                <div class="base-cell base-black">-->
                <!--                  <span class="base-tips">客户名称:</span>-->
                <!--                  <span>{{ customerData.intactName }}</span>-->
                <!--                </div>-->
                <el-row style="margin-top:5px;">
                  <div class="base-cell">
                    <span class="base-tips">线索归属人：</span>
                    <span>{{ customerData.belongName }}</span>
                  </div>
                  <el-divider direction="vertical" v-if="customerData.outCompany" style="margin-top:1px"/>
                  <div class="base-cell" v-if="customerData.outCompany">
                    <span>外协公司：</span>
                    <span>{{ customerData.outCompany }}</span>
                  </div>
                </el-row>
                <div class="base-cell base-black">
                  <span class="base-tips">客户来源：</span>
                  <span>{{ customerData.sourceName }} - {{ customerData.sceneName }}</span>
                </div>
                <div class="base-cell base-black">
                  <span class="base-tips">客户类型：</span>
                  <span>{{ customerData.customerType == '0' ? '代理商' : (customerData.customerType == '1' ? '直客' : '代理商客户') }}</span>
                </div>
                <div class="base-cell base-black">
                  <span class="base-tips">客户级别：</span>
                  <span>{{ customerData.levelName }}</span>
                </div>
                <div class="base-cell base-black">
                  <span class="base-tips">客户地址：</span>
                  <span>{{ customerData.address }}</span>
                </div>
                <div class="base-cell base-black">
                  <span class="base-tips">经营范围：</span>
                  <span>{{ customerData.businessName }}</span>
                </div>
                <!--                <div class="base-cell base-black">-->
                <!--                  <span class="base-tips">网址：</span>-->
                <!--                  <span>www.12399780.com</span>-->
                <!--                </div>-->
                <!--                                <div class="base-cell base-black">-->
                <!--                                    <span class="base-tips">电商平台:</span>-->
                <!--                                    <i class="fa fa-apple"></i>-->
                <!--                                    <i class="fa fa-github-alt" style="margin-left:5px;"></i>-->
                <!--                                    <i class="fa fa-amazon" style="margin-left:5px;"></i>-->
                <!--                                </div>-->
              </div>
            </div>
            <el-divider border-style="dotted"/>
            <div class="card-item" ref="userLabel">
              <el-row justify="space-between">
                <div class="title">
                  <span>客户画像</span>
                  <el-icon :size="16" style="margin-left: 5px;cursor:pointer;" color="var(--el-text-color-secondary)" @click="portraitVisible = true">
                    <ele-Setting/>
                  </el-icon>
                </div>
              </el-row>
              <div class="card-center">
                <template v-if="portraitList.length > 0">
                  <el-row style="margin-top:5px;" v-for="item in portraitList" :key="item.id">
                    <span style="font-size:12px;" class="base-tips">{{ item.name }}：</span>
                    <el-row class="label-card-content">
                      <el-tag size="small" v-for="tag in item.tags.split(',')" style="margin: 0 5px 5px 0" :key="tag">{{ tag }}</el-tag>
                    </el-row>
                  </el-row>
                </template>
                <template v-else>
                  <el-empty style="padding: 0;font-size:12px;" :image-size="50" description="无数据"/>
                </template>
              </div>
            </div>

            <el-divider border-style="dotted"/>
            <div class="card-item" ref="contactItem">
              <el-row justify="space-between">
                <div class="title">
                  <span>联系人</span>
                  <el-icon :size="16" style="margin-left:2px;cursor:pointer;" color="var(--el-text-color-secondary)" @click="dialogContact = true">
                    <ele-Setting/>
                  </el-icon>
                </div>
              </el-row>
              <el-table size="small" :data="contactList" border stripe style="margin-top:10px" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}">
                <el-table-column label="名称" prop="name" width="70px"/>
                <el-table-column label="职位" prop="job"/>
                <el-table-column label="角色" prop="role"/>
                <el-table-column label="手机号码" prop="phone" width="110px"/>
                <el-table-column label="微信号" prop="wechat">
                  <template v-slot="{row}">
                    <span v-if="row.isWechat === 0">微信同号</span>
                    <span v-else>{{ row.wechat }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="主要联系人" fixed="right" width="90px">
                  <template v-slot="{row}">{{ row.isMain == 0 ? '是' : '否' }}</template>
                </el-table-column>
              </el-table>
            </div>
            <div class="card-item">
              <el-row justify="space-between">
                <div class="title">
                  <span>历史收货信息</span>
                </div>
              </el-row>
              <el-table size="small" :data="receiveAddrList" border style="margin-top:10px;" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}">
                <el-table-column label="收货人" prop="name" width="80"/>
                <el-table-column label="手机" prop="phone" width="100"/>
                <el-table-column label="地址" prop="address"/>
              </el-table>
            </div>
            <div class="card-item">
              <el-row justify="space-between">
                <div class="title">
                  <!--客户发票信息-->
                  <span>开票信息</span>
                  <el-icon :size="16" style="margin-left: 5px;cursor:pointer;" color="var(--el-text-color-secondary)" @click="dialogInvoice = true">
                    <ele-Edit/>
                  </el-icon>
                </div>
              </el-row>
              <div class="card-center">
                <template v-if="customerInvoice.id">
                  <div class="base-cell base-black">
                    <span class="base-tips">发票抬头：</span>
                    <span>{{ customerInvoice.purchaser }}</span>
                  </div>
                  <div class="base-cell base-black">
                    <span class="base-tips">识别号：</span>
                    <span>{{ customerInvoice.taxpayerIdNo }}</span>
                  </div>
                  <div class="base-cell base-black">
                    <span class="base-tips">地址：</span>
                    <span>{{ customerInvoice.address }}</span>
                  </div>
                  <div class="base-cell base-black">
                    <span class="base-tips">手机号：</span>
                    <span>{{ customerInvoice.telephone }}</span>
                  </div>
                  <div class="base-cell base-black">
                    <span class="base-tips">开户行：</span>
                    <span>{{ customerInvoice.openingBank }}</span>
                  </div>
                  <div class="base-cell base-black">
                    <span class="base-tips">银行账号：</span>
                    <span>{{ customerInvoice.bankAccount }}</span>
                  </div>
                </template>
                <template v-else>
                  <el-empty style="padding: 0;font-size:12px;" :image-size="50" description="无数据"/>
                </template>
              </div>
            </div>
            <el-divider border-style="dotted"/>
            <div class="card-item" ref="salesAccount">
              <el-row justify="space-between">
                <div class="title">
                  <span>销售费用统计</span>
                </div>
              </el-row>
              <div class="card-center">
                <div class="base-cell base-black">
                  <span class="base-tips">差旅：</span>
                  <span>2000</span>
                </div>
                <div class="base-cell base-black">
                  <span class="base-tips">客情：</span>
                  <span>2000</span>
                </div>
              </div>
            </div>
          </el-card>
        </div>
        <div class="right-container">
          <el-card :body-style="{ padding: `8px 10px 10px` }">
            <el-row justify="space-between" align="middle">
              <div class="title" style="height: 30px;display: flex;align-items: center">行动
                <el-icon :size="16" style="margin-left: 5px;cursor: pointer" color="var(--el-text-color-secondary)" @click="openActionSetting">
                  <ele-Setting/>
                </el-icon>
              </div>
              <el-row justify="end">
                <!-- <div class="title-item" @click="openMaterial('doc')"> -->
                <div class="title-item" @click="showDocList = true">
                  <el-icon color="var(--next-bg-menuBar-light-1)" size="16px">
                    <ele-Document/>
                  </el-icon>
                  <span class="tips">文档</span>
                  <span>12</span>
                </div>
                <div class="title-item" @click="openMaterial('file')">
                  <el-icon color="var(--next-bg-menuBar-light-1)" size="16px">
                    <ele-Link/>
                  </el-icon>
                  <span class="tips">附件</span>
                  <span>3</span>
                </div>
              </el-row>
            </el-row>
            <el-row justify="center" align="middle" style="margin-top:20px;">
              <div class="action-cell">
                <div class="action-top">
                  <i class="fa fa-whatsapp"></i>
                  <span class="action-tips">行动记录</span>
                </div>
                <p class="action-data">7</p>
              </div>
              <div class="action-cell" @click="openTable('order')">
                <div class="action-top">
                  <el-icon size="16px">
                    <ele-Tickets/>
                  </el-icon>
                  <span class="action-tips">合同订单</span>
                </div>
                <p class="action-data">1</p>
              </div>
              <div class="action-cell" @click="openTable('logistic')">
                <div class="action-top">
                  <el-icon size="18px">
                    <ele-Van/>
                  </el-icon>
                  <span class="action-tips">发货</span>
                </div>
                <p class="action-data">1</p>
              </div>
              <div class="action-cell" @click="openTable('cancel')">
                <div class="action-top">
                  <el-icon size="16px">
                    <ele-DocumentDelete/>
                  </el-icon>
                  <span class="action-tips">取消订单</span>
                </div>
                <p class="action-data">1</p>
              </div>
              <div class="action-cell" @click="openTable('reback')">
                <div class="action-top">
                  <el-icon size="16px">
                    <ele-Money/>
                  </el-icon>
                  <span class="action-tips">回款</span>
                </div>
                <p class="action-data">1</p>
              </div>
              <div class="action-cell">
                <div class="action-top">
                  <i class="iconfont icon-biaodan"></i>
                  <span class="action-tips">发票</span>
                </div>
                <p class="action-data">1</p>
              </div>
              <div class="action-cell">
                <div class="action-top">
                  <el-icon size="16px">
                    <ele-Service/>
                  </el-icon>
                  <span class="action-tips">售后</span>
                </div>
                <p class="action-data">1</p>
              </div>
            </el-row>
          </el-card>
          <div class="right-card-item">
            <el-row style="padding: 0 10px;">
              <div class="title" style="margin-right:10px;font-weight:bold;">行动记录</div>
              <el-select v-model="actionType" placeholder="请选择" size="small" style="width:60px;">
                <el-option v-for="item in actionList" :key="item.value" :label="item.name"
                           :value="item.value"/>
              </el-select>
            </el-row>
            <el-card :body-style="{ padding: `8px 10px` }" style="margin-top:10px;"
                     v-for="(item, index) in actionRecordList" :key="item">
              <el-row justify="space-between" align="middle">
                <span class="action-time">2022-10-13 15:20:12</span>
                <el-button link type="primary" size="small" @click="copyRecord(index)" style="padding:5px 0;">复制</el-button>
              </el-row>
              <el-row justify="space-between" align="middle" style="margin-top:5px;">
                <div class="item-content">
                  <el-tag size="small">打电话</el-tag>
                  打电话内容打电话内容打电话内容打电话内容打电话内容
                </div>
                <div style="margin-right:3px;">
                  <el-icon size="18px">
                    <ele-Microphone/>
                  </el-icon>
                </div>
              </el-row>
            </el-card>
          </div>
        </div>
      </div>
      <div class="fixed-right">
        <div class="fixed-cell" @click="customerVisible = true">
          <el-icon>
            <ele-Edit/>
          </el-icon>
        </div>
        <div class="fixed-cell" @click="matterVisible = true">
          <el-icon>
            <ele-Plus/>
          </el-icon>
        </div>
        <!--        <div v-if="scrollTop > 100" class="fixed-cell" @click="backTop">-->
        <!--          <el-icon>-->
        <!--            <ele-CaretTop/>-->
        <!--          </el-icon>-->
        <!--        </div>-->
      </div>
    </div>
    <div class="tabs-list" title="关闭">
      <div class="close-btn" @click="drawer = false">
        <el-icon color="var(--next-color-white)" size="28px">
          <ele-CircleClose/>
        </el-icon>
      </div>
    </div>

    <material-dialog :title="materialTitle" v-model:dialogVisible="dialogMaterial" :default-list="materialList"/>
    <el-dialog v-model="dialogTable" :title="tableTitle" width="660px" :append-to-body="true">
      <el-table :data="tableList" size="small" border>
        <el-table-column :label="item.label" v-for="item in tableHeader" :key="item.id" :prop="item.prop"/>
      </el-table>
      <div class="page-block">
        <el-pagination
            v-model:currentPage="tableCurrent"
            v-model:page-size="tablePage"
            :page-sizes="[10, 20, 30, 40]"
            :small="true"
            :disabled="false"
            :background="false"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalTable"
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-dialog>
    <!-- 客户经理 -->
    <el-dialog v-model="managerVisible" title="客户经理" width="500px" :append-to-body="true">
      <el-row style="margin-bottom: 5px">
        <el-select v-model="selectedManagerId" size="small">
          <el-option v-for="item in enterpriseUsers" :key="item.userId" :value="item.userId" :label="item.nickname" :disabled="existList(item.userId)"/>
        </el-select>
        <el-button style="margin-left: 10px" size="small" type="primary" :icon="Plus" @click="addManager">添加</el-button>
      </el-row>
      <el-table :data="managerList" stripe border size="small" :header-cell-style="{textAlign: 'center', background: 'var(--el-color-primary-light-9)', color: 'var(--next-bg-menuBar-light-1)'}" :cell-style="{textAlign: 'center'}">
        <el-table-column label="名称" prop="userName"/>
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button size="small" type="danger" @click="removeManager(row)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-button size="small" type="primary" @click="managerVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <!--    &lt;!&ndash;  行动选项  &ndash;&gt;-->
    <!--    <action-setting v-model:dialogPop="dialogAction"></action-setting>-->
    <!-- 成交评估 -->
    <evaluation v-model:dialog-visible="dialogEvaluation" @callback="getEvaluation"/>
    <!-- 用户画像添加 -->
    <customer-portrait v-model:dialog-visible="portraitVisible" :customer-id="customerData.customerId" :data-list="portraitList" @callback="getPortraitData"/>
    <!-- 联系人 -->
    <contact-table v-model:dialogPop="dialogContact" :contact-list="contactList" :customer-id="customerData.customerId"/>
    <!-- 发票信息 -->
    <invoice-setting v-model:dialog-visible="dialogInvoice" :invoice-data="customerInvoice" @callback="getInvoiceData"/>
    <!-- 编辑客户信息 -->
    <customer-edit v-model:dialog-visible="customerVisible" v-model:defaultForm="customerData"/>
    <!-- 修改机会信息 -->
    <opportunity-form v-model:dialog-pop="opportunityVisible" :default-form="opportunityForm" @callback="getOpportunityData"/>
    <!-- 文档 -->
    <el-drawer v-model="showDocList" :with-header="false" @close="showDocList = false" :append-to-body="true" size="65%" class="customer-detail-drawer" :modal="true">
      <documents v-if="showDocList" v-model:userId="userId"></documents>
    </el-drawer>
    <!-- 发起事项 -->
    <launch-matter
        v-model:visible="matterVisible"
        v-model:relate-item="relateItem"
        v-model:detail-form="customerData"
        module-code="Customer"
        @closeCallback="getMatterPage"/>
  </el-drawer>
</template>

<script>
import {toRefs, computed, reactive, onMounted, ref} from 'vue'
import {Plus} from '@element-plus/icons-vue'
import {formatDate} from '/@/utils/formatTime'
import opportunityApi from '/@/api/ums/customer/opportunity'
import {ElMessage, ElMessageBox} from 'element-plus'
import {umsMemberApi} from '/@/api/ums/member'
import api from '/@/api/commonApi'
import {getCustomerContacts} from '/@/api/ums/customer/contact'
import {getDictByCodes} from '/@/api/sys/dict'
import estimateTradeApi from '/@/api/ums/customer/estimateTrade'
import businessApi from '/@/api/ums/customer/business'
import invoiceApi from '/@/api/ums/customer/invoice'
import levelApi from '/@/api/ums/customer/level'
import {getDeptName} from '/@/api/sys/dept'
import portraitApi from '/@/api/ums/customer/portrait'
import customerApi from '/@/api/ums/customer/index'
import Cookies from 'js-cookie'
import {getRecentMatters, getRelatableId} from '/@/api/matter'
import TreeLine from '/@/components/treeLine/index.vue'
import CustomerEdit from '/@/views/crm/components/CustomerEdit.vue'
import MaterialDialog from '/@/components/materialDialog/index.vue'
// import ActionSetting from './ActionSetting.vue'
import Evaluation from '/@/views/crm/components/Evaluation.vue'
import CustomerPortrait from '/@/views/crm/components/CustomerPortrait.vue'
import ContactTable from '/@/views/crm/components/ContactTable.vue'
import InvoiceSetting from '/@/views/crm/components/InvoiceSetting.vue'
import OpportunityForm from '/@/views/crm/components/OpportunityForm.vue'
import Documents from '/@/views/space/documents/index.vue'
import LaunchMatter from '/@/views/matter/LaunchMatter.vue'
import {getEnterpriseUsers} from '/@/api/sys/user'
import {useOrderApi} from '/@/api/order'


export default {
  name: 'CustomerDetail',
  props: {
    dialogDrawer: {
      type: Boolean,
      default: false
    },
    detailData: {
      type: Object,
      default: {}
    }
  },
  components: {
    OpportunityForm,
    TreeLine,
    CustomerEdit,
    MaterialDialog,
    // ActionSetting,
    Evaluation,
    CustomerPortrait,
    ContactTable,
    InvoiceSetting,
    Documents,
    LaunchMatter
  },
  emits: ['callback', 'update:dialogDrawer'],
  setup(props, context) {
    const contactItem = ref()
    const userLabel = ref()
    const customerDetail = ref()
    const salesAccount = ref()
    const {dialogDrawer, detailData} = toRefs(props)

    let drawer = computed({
      get: () => {
        if (dialogDrawer.value) {
          state.userId = Cookies.get('userId')
          state.customerData = detailData.value
          state.customerData.id = state.customerData.customerId
          state.opportunityParams.customerId = state.customerData.customerId
          getEvaluation()   // 成交评估列表
          getInvoiceData()    // 开票信息
          getOpportunityData()  // 机会列表
          getPortraitData()   // 用户画像标签列表
          if (detailData.value.businessScope) {
            businessApi.getName(detailData.value.businessScope).then(res => state.customerData.businessName = res.data).catch(e => console.log(e))
          }
          // 获取部门名称
          getDeptName(state.customerData.deptId).then(res => state.customerData.deptName = res.data || '-').catch(e => console.log(e))
          getDictByCodes(['MoneyCurrency']).then(res => state.dictMap = res.data).catch(e => console.log(e))
          getCustomerContacts(detailData.value.customerId).then(res => state.contactList = res.data).catch(e => console.log(e))
          levelApi.levelList().then(res => state.levelList = res.data).catch(e => console.log(e))
          // 最近操作事项列表
          getRecentMatters({relateCode: 'Customer', dataId: state.customerData.customerId}).then(res => {
            state.recentList = res.data
            // 如果联系日期为空, 且最近事项不为空, 生成联系日期(第一条事项时间)
            if (!state.customerData.followTime && state.recentList != null && state.recentList.length > 0) {
              customerApi.addContactDate({id: state.customerData.customerId}).then(res => {
                if (res.data) {
                  state.customerData.followTime = res.data.followTime
                  state.customerData.followDays = res.data.followDays
                }
              }).catch(e => console.log(e))
            }
          }).catch(e => console.log(e))
          // 获取可关联项id
          getRelatableId('Customer').then(res => {
            state.relateItem.label = res.data.label + '/' + state.customerData.nickname
            state.customerData.relatableId = state.relateItem.agendaMatterRelatableId = res.data.id
          }).catch(e => console.log(e))
          getManagerData()  // 获取客户经理列表
          getEnterpriseUsers().then(res => state.enterpriseUsers = res.data).catch(e => console.log(e))
          // 客户历史收货地址
          useOrderApi().getCustomerAddrList(state.customerData.customerId).then(res => state.receiveAddrList = res.data).catch(e => console.log(e))
          state.relateItem.seRelateDataId = state.customerData.customerId
        }
        return dialogDrawer.value
      },
      set: (val) => context.emit('update:dialogDrawer', val)
    })

    const state = reactive({
      product: [{
        // 阶段展示
        stageLine: {},
        active: 11,
        orderStage: {
          common: [
            {
              label: '待审批',
              value: 0
            }, {
              label: '已审批',
              value: 1
            }, {
              label: '已付款',
              value: 2
            }, {
              label: '已发货',
              value: 3
            }, {
              label: '签收',
              value: 4
            }, {
              label: '重发补发',
              value: 5
            }, {
              label: '退货',
              value: 6
            }, {
              label: '执行完毕',
              value: 7
            }
          ]
        },
        orderActive: 1,
        probably: 0,
        sale: 0
      }],
      customerData: {
        id: null,
        orderAmount: 0,
        returnAmount: 0,
        currency: '0',
        managerNames: null,
        businessName: null,   // 经营范围
        address: null,
        belongName: null,
        levelName: null,
        customerType: null,
        outCompany: null,
        sourceChannel: null,
        sourceName: null,
        sourceScene: null,
        sceneName: null,
        contact: {
          name: null,
          phone: null
        },
        followDays: 0,
        followTime: null
      },
      dictMap: {},
      drawerSize: document.body.clientWidth <= 1400 ? '1220px' : '85%',
      evaluationList: [],   // 成交评估标签列表
      customerInvoice: {},  // 客户发票信息
      opportunityParams: {  // 机会参数
        customerId: null,
        sort: 0   // 0倒序 1顺序
      },
      opportunityList: [],  // 机会列表
      levelList: [],    // 客户级别列表
      portraitList: [],   // 画像标签列表
      customerVisible: false,   // 编辑客户信息
      matterVisible: false,   // 发起事项对话框
      relateItem: {
        agendaMatterRelatableId: null,
        seRelateDataId: null,
        label: null
      },    // 关联项
      managerVisible: false,
      managerList: [],  // 客户经理列表
      selectedManagerId: null,  // 选中要添加为客户经理的用户id
      enterpriseUsers: [],    // 企业人员
      receiveAddrList: [],  // 历史收货地址

      actionType: '0',
      actionList: [{
        name: '未来',
        value: '0'
      }, {
        name: '过去',
        value: '1'
      }, {
        name: '现在',
        value: '2'
      }],
      contactList: [],  // 联系人列表
      actionRecordList: [{}, {}, {}, {}, {}],
      customerForm: {
        name: '广州英地绿壳科技有限公司',
        source: '1',
        scene: '1',
        contactList: [{
          name: '田总',
          job: '总经理',
          role: '决策人',
          phone: '13800138000',
          wechat: '13800138000',
          default: true,
          remark: ''
        },
          {
            name: '黄生',
            job: '部门经理',
            role: '使用者',
            phone: '13800138000',
            wechat: '13800138000',
            default: false,
            remark: ''
          }],
        area: ['440000', '440100', '440104'],
        areaDetail: [],
        address: '北京街道北京路374号南越王博物院(王宫展区)',
        product: [{name: '产品1', stageLine: true, orderLine: true}, {
          name: '产品2',
          stageLine: true,
          orderLine: false
        }],
        userLabel: [{label: '品牌IP', value: ''}, {label: '消费群体', value: ''}, {
          label: '价格定位',
          value: ''
        }, {label: '市场区域', value: ''}, {label: '营销模式', value: ''}, {label: '销售渠道', value: ''}],
        currency: 1,
        ticketName: '广州英地绿壳科技有限公司',
        ticketCode: '899300yttoyi8987',
        bankCode: '899300yttoyi8987',
        bankMsg: '中国银行888888888',
        beforeSales: [0, 1, 2, 3, 4, 5],
        salesIn: [0, 1, 2, 3, 4],
        afterSales: [0, 1, 2, 3, 4],
        evaluation: [{name: 'Tag 1'}, {name: 'Tag 2'}, {name: 'Tag 3'}, {name: 'Tag 4'}, {name: 'Tag 5'}],
        signDate: '',
        sale: 20000
      },
      recentList: [],
      beforeSales: [{}, {}, {}, {}, {}],
      centerSales: [{}, {}, {}, {}],
      afterSales: [{}, {}, {}, {}],
      recentOpen: false,
      beforeOpen: false,
      centerOpen: false,
      afterOpen: false,
      customerList: [{id: '0'}, {}],
      customerId: '0',
      docNumber: {},
      fileMap: {},
      materialTitle: '',
      materialList: [{
        label: '报销凭证',
        num: 2,
        id: 1,
        children: [{
          label: '火车票',
          id: 2
        }]
      }, {
        label: '外勤凭证',
        num: 2,
        id: 1,
        children: []
      }],
      dialogMaterial: false,
      tableTitle: '',
      dialogTable: false,
      tableList: [],
      tableHeader: [],
      totalTable: 0,
      tableCurrent: 1,
      tablePage: 10,
      dialogAction: false,
      dialogEvaluation: false,
      portraitVisible: false,
      dialogContact: false,
      dialogInvoice: false,
      dialogCustomerManage: false,// 选择客户经理
      scrollTop: 0,
      // 预计签约时间 - 只能选今天或者今天之后的时间
      expireTimeOPtion: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7  //如果没有后面的-8.64e7就是不可以选择今天的
        }
      },
      opportunityVisible: false,    // 当前编辑的机会信息显示隐藏控制
      opportunityForm: {},
      showDocList: false,
      userId: ''
    })


    const close = () => {
      context.emit('callback')
    }
    // 获取评估标签数据
    const getEvaluation = () => estimateTradeApi.listWithRate(state.customerData.customerId).then(res => state.evaluationList = res.data || []).catch(e => console.log(e))
    // 评估标签值改变
    const evaluationChange = (trade) => estimateTradeApi.saveRate({
      customerId: state.customerData.customerId,
      estimateTradeId: trade.id,
      rate: trade.rate
    }).then(res => {
      if (res.data) {
        ElMessage.success('修改成功！')
      }
    }).catch(e => console.log(e))
    // 获取开票信息
    const getInvoiceData = () => invoiceApi.getInvoice(state.customerData.customerId).then(res => state.customerInvoice = res.data || {customerId: state.customerData.customerId}).catch(e => console.log(e))
    // 获取机会列表
    const getOpportunityData = () => opportunityApi.listByCustomer(state.opportunityParams).then(res => state.opportunityList = res.data || []).catch(e => console.log(e))
    // 画像标签列表
    const getPortraitData = () => portraitApi.getList(state.customerData.customerId).then(res => state.portraitList = res.data).catch(e => console.log(e))
    // 客户经理列表
    const getManagerData = () => customerApi.getManagers(state.customerData.customerId).then(res => {
      state.managerList = res.data
      let names = ''
      state.managerList.forEach(item => names += item.userName + ',')
      state.customerData.managerNames = names.substring(0, names.length - 1)
    }).catch(e => console.log(e))
    // 点击修改阶段状态
    const toStage = (stage, opportunity) => {
      if (opportunity.stageId == stage.id) {
        return ElMessage.warning('已处于该阶段')
      }
      opportunityApi.editData({id: opportunity.id, stageId: stage.id}).then(res => {
        if (res.data) {
          opportunity.stageId = stage.id
          stage.time = formatDate(new Date(), 'mm-dd')
          ElMessage.success('修改成功！')
        }
      }).catch(e => console.log(e))
    }
    const getOrderStatus = (e, index) => {
      state.product[index].orderActive = Number(e.value)
    }
    // 机会快捷编辑
    const editOpportunity = (item) => {
      let params = {
        id: item.id,
        signDate: item.signDate,
        signAmount: item.signAmount,
        probability: item.probability
      }
      opportunityApi.editData(params).then(res => {
        if (res.data) {
          ElMessage.success('修改成功！')
        }
      }).catch(e => console.log(e))
    }
    const backTop = () => {
      document.querySelector('.customer-detail').parentNode.scrollTo(0, 0)
    }
    const jumpContact = () => {
      document.querySelector('.customer-detail').parentNode.scrollTo(0, contactItem.value.offsetTop)
    }
    const jumpUserLabel = () => {
      document.querySelector('.customer-detail').parentNode.scrollTo(0, userLabel.value.offsetTop)
    }
    const jumpSales = () => {
      document.querySelector('.customer-detail').parentNode.scrollTo(0, salesAccount.value.offsetTop)
    }
    // eslint-disable-next-line no-unused-vars
    const copyRecord = index => {
      state.actionRecordList.push({})
    }
    // 展开全部最近操作
    const openRecentAll = () => {
      state.recentOpen = !state.recentOpen
    }
    const openBefore = () => {
      state.beforeOpen = !state.beforeOpen
    }
    const openCenter = () => {
      state.centerOpen = !state.centerOpen
    }
    const openAfter = () => {
      state.afterOpen = !state.afterOpen
    }
    const getCustomer = (id) => {
      state.customerId = id
    }
    const openMaterial = (type) => {
      state.materialList = []
      if (type == 'doc') {
        state.materialTitle = '文档'
        for (let item of Object.keys(state.fileMap.docMap)) {
          state.materialList.push({
            label: item,
            value: state.fileMap.docMap[item]
          })
        }
      } else {
        state.materialTitle = '附件'
        for (let item of Object.keys(state.fileMap.attachMap)) {
          state.materialList.push({
            label: item,
            value: state.fileMap.attachMap[item]
          })
        }
      }
      state.dialogMaterial = true
    }
    const openTable = (type) => {
      state.tableCurrent = 1
      state.tableHeader = []
      state.tableList = []
      if (type == 'order') {
        state.tableTitle = '合同订单'
        state.tableHeader = [{
          label: '合同编号',
          prop: 'code'
        }, {
          label: '合同名称',
          prop: 'name'
        }, {
          label: '公司简称',
          prop: 'shortName'
        }, {
          label: '合同金额',
          prop: 'total'
        }, {
          label: '产品详情',
          prop: 'detail'
        }, {
          label: '产品数量',
          prop: 'num'
        }, {
          label: '合同状态',
          prop: 'contractStatus'
        }, {
          label: '双章状态',
          prop: 'verifyStatus'
        }, {
          label: '备注',
          prop: 'remark'
        }]
        state.tableList = [{
          code: '123456789',
          name: '能源xxx',
          shortName: '简称',
          total: '9999',
          detail: '产品1',
          num: 20,
          contractStatus: '已审批',
          verifyStatus: '双章',
          remark: '备注'
        }]
      } else if (type == 'logistic') {
        state.tableTitle = '发货记录'
        state.tableHeader = [{label: '发货日期', prop: 'date'}, {label: '实发产品详情', prop: 'detail'}, {
          label: '实发数量',
          prop: 'num'
        }, {label: '发货方式', prop: 'logisticType'}, {label: '物流方式', prop: 'logisticCompany'}, {
          label: '签收状态',
          prop: 'signStatus'
        }]
        state.tableList = [{
          date: '2022-10-17',
          detail: '秸秆颗粒',
          num: '50吨',
          logisticType: '铁运',
          logisticCompany: '德邦物流',
          signStatus: '已签收'
        }]
      } else if (type == 'reback') {
        state.tableTitle = '回款记录'
        state.tableHeader = [{label: '回款日期', prop: 'date'}, {label: '回款金额', prop: 'total'}, {
          label: '回款方式',
          prop: 'paymentType'
        }, {label: '开票状态', prop: 'ticketStatus'}, {label: '退款', prop: 'rebackTotal'}, {
          label: '备注',
          prop: 'remark'
        }]
        state.tableList = [{
          date: '2022-10-17',
          total: '20000',
          paymentType: '对公账户',
          ticketStatus: '已开',
          rebackTotal: '2000',
          remark: '退票重开'
        }]
      } else if (type == 'cancel') {
        state.tableTitle = '取消订单'
        state.tableHeader = [{label: '合同编号', prop: 'code'}, {label: '合同名称', prop: 'name'}, {
          label: '公司简称',
          prop: 'shortName'
        }, {label: '合同金额', prop: 'contractTotal'}, {label: '产品详情', prop: 'detail'}, {
          label: '产品数量',
          prop: 'num'
        }, {label: '合同状态', prop: 'status'}, {label: '取消原因', prop: 'reason'}, {
          label: '是否已回款',
          prop: 'isReback'
        }, {label: '取消类型', prop: 'type'}, {label: '备注', prop: 'remark'}]
        state.tableList = [{
          code: '12345678',
          name: '能源xxxxx',
          shortName: '简称',
          contractTotal: '50000',
          detail: '产品A',
          num: '200',
          status: '进行中',
          reason: '',
          isReback: '是',
          type: '整单取消',
          remark: '备注'
        }]
      }
      state.dialogTable = true
    }
    // 切换条数
    // eslint-disable-next-line no-unused-vars
    const handleSizeChange = e => {
    }
    // 切换页码
    // eslint-disable-next-line no-unused-vars
    const handleCurrentChange = e => {
    }
    const openActionSetting = () => {
      state.dialogAction = true
    }
    onMounted(() => {
      window.onresize = () => state.drawerSize = document.body.clientWidth <= 1400 ? '1220px' : '85%'
    })
    const disabledDate = (time) => {
      return time.getTime() <= (Date.now() - 8.64e7)
    }
    // 打开机会添加/编辑表单
    const openOpportunity = (opportunity) => {
      if (opportunity && opportunity.id) {
        state.opportunityForm = {
          id: opportunity.id,
          customerId: opportunity.customerId,
          stageId: opportunity.stageId,
          deptId: opportunity.deptId,
          belongId: opportunity.belongId,
          productLineId: opportunity.productLineId,
          productLineName: opportunity.productLineName,
          signDate: opportunity.signDate,
          signAmount: opportunity.signAmount,
          probability: opportunity.probability,
          remark: opportunity.remark
        }
      } else {
        state.opportunityForm = {
          customerId: state.customerData.customerId
        }
      }
      state.opportunityVisible = true
    }
    // 机会排序改变
    const changeOpportunitySort = () => {
      state.opportunityParams = state.opportunityParams == 0 ? 1 : 0
      getOpportunityData()
    }
    // 解绑当前客户, 如果客户已无客户经理
    const unbind = () => {
      ElMessageBox.confirm('确定解绑客户 ' + state.customerData.intactName + ' ？', {
        confirmButtonText: '解绑',
        cancelButtonText: '取消',
        buttonSize: 'small',
        type: 'warning'
      }).then(() => {
        customerApi.unbindData({id: state.customerData.customerId}).then(res => {
          if (res.data) {
            ElMessage.success('解绑成功！')
            context.emit('update:dialogDrawer', false)
          }
        }).catch(e => console.log(e))
      }).catch(() => {
      })
    }
    // 获取事项分页数据
    const getMatterPage = () => {
      // TODO
    }
    // 添加客户经理
    const addManager = () => {
      if (!state.selectedManagerId) {
        return ElMessage.warning('请选择要添加为客户经理的人员')
      }
      customerApi.createManager({
        userId: state.selectedManagerId,
        customerId: state.customerData.customerId
      }).then(res => {
        if (res.data){
          state.selectedManagerId = null
          getManagerData()
          ElMessage.success('添加成功！')
        }
      }).catch(e => console.log(e))
    }
    // 移除客户经理
    const removeManager = (item) => {
      ElMessageBox.confirm('确定移除客户经理 ' + item.userName + ' ？', {
        confirmButtonText: '移除',
        cancelButtonText: '取消',
        buttonSize: 'small',
        type: 'warning'
      }).then(() => {
        customerApi.removeManager(item).then(res => {
          if (res.data) {
            getManagerData()
            ElMessage.success('移除成功！')
          }
        }).catch(e => console.log(e))
      }).catch(() => {})
    }
    // 判断是否已经是客户经理
    const existList = (userId) => {
      let flag = false
      if (state.managerList && state.managerList.length > 0) {
        for (let i = 0; i < state.managerList.length; i++) {
          if (userId == state.managerList[i].userId) {
            flag = true
            break
          }
        }
      }
      return flag
    }
    // 获取文档数量
    const getDocNumber = () => {
      api.docNumber({relevanceId: detailData.value.id}).then(res => state.docNumber = res.data).catch(e => console.log(e))
    }
    // 获取文档列表
    const getRelevanceFile = () => {
      api.relevanceFile({relevanceId: detailData.value.id}).then(res => state.fileMap = res.data).catch(e => console.log(e))
    }


    return {
      drawer,
      Plus,
      ...toRefs(state),
      close,
      toStage,
      getOrderStatus,
      backTop,
      contactItem,
      jumpContact,
      userLabel,
      jumpUserLabel,
      copyRecord,
      customerDetail,
      salesAccount,
      jumpSales,
      openRecentAll,
      openBefore,
      openCenter,
      openAfter,
      getCustomer,
      getDocNumber,
      getRelevanceFile,
      openMaterial,
      openTable,
      handleSizeChange,
      handleCurrentChange,
      openActionSetting,
      disabledDate,
      editOpportunity,
      detailData,
      getEvaluation,
      evaluationChange,
      getInvoiceData,
      getOpportunityData,
      getPortraitData,
      openOpportunity,
      changeOpportunitySort,
      unbind,
      getMatterPage,
      removeManager,
      existList,
      addManager
    }
  }
}
</script>

<style scoped lang="scss">
.customer-detail {
  padding: 10px;
  background: var(--next-bg-main-color);
  min-height: 100%;

  .company-data {
    .company-title {
      text-align: center;
      font-size: 18px;
      color: var(--next-bg-menuBar-light-1);
    }

    .tips {
      color: var(--el-color-info);
      margin-right: 5px;
    }

    .tips-data {
      color: var(--el-color-info);
      font-size: 13px;
    }

    .tips-cell {
      margin-right: 15px;
      font-size: 13px;
      display: flex;
      align-items: center;
      position: relative;
      padding-right: 15px;

      &::after {
        content: "";
        position: absolute;
        right: 0;
        top: 3px;
        bottom: 3px;
        border-right: 1px solid var(--next-bg-menuBarColor);
      }

      &:last-child {
        padding-right: 0;
        margin-right: 0;

        &::after {
          display: none;
        }
      }
    }

    .tips-hover {
      cursor: pointer;

      &:hover {
        color: var(--el-color-primary);

        .tips, .tips-data {
          color: var(--el-color-primary);
        }
      }
    }

    .gery {
      color: var(--next-bg-topBarColor);
    }

    .black {
      color: var(--next-bg-menuBar-light-1);
    }
  }

  .tag {
    padding: 10px;
    font-size: 13px;
    border: 1px solid var(--el-color-primary-light-6);
    line-height: 20px;
    border-radius: 3px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary-dark-2);
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
  }

  .small-tips {
    font-size: 12px;
    margin: 0 10px 0 8px;
  }

  .product-name {
    margin-right: 5px;
    width: 70px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .opportunity-wrapper {
    :deep(.el-input-number__decrease) {
      display: none;
    }

    :deep(.el-input-number__increase) {
      display: none;
    }
  }

  // 排序图标
  .asc-color {
    color: var(--el-color-primary);
  }

  .desc-color {
    color: var(--el-color-warning);
  }

  .stage-row {
    display: flex;
    margin-top: 10px;
    flex-wrap: wrap;

    .col-container {
      margin-left: 20px;
      flex: 1;
    }

    &:last-child {
      margin-bottom: 0;
    }

    .col-opportunity {
      font-weight: bold;
      color: var(--el-color-primary);
      margin-right: 10px;
    }
  }

  .page-list {
    margin-top: 10px;
    display: flex;
    align-items: flex-start;

    .left-container {
      width: 28%;

      .title {
        display: flex;
        align-items: center;
        font-weight: bold;
        color: var(--next-bg-menuBar-light-1);
      }
    }

    .action-add-btn {
      margin: 0 1px;
      color: var(--el-color-primary);
      font-size: 30px;
      opacity: .5;
      position: absolute;
      top: 35%;
      left: 23.8%;
      width: 35px;

      &:hover {
        cursor: pointer;
        opacity: 1;
      }
    }

    .right-container {
      flex: 1;
      margin-left: 10px;

      .title-item {
        display: flex;
        align-items: center;
        cursor: pointer;
        font-size: 12px;
        padding: 4px 6px;
        border-radius: 4px;
        border: 1px solid var(--el-color-primary-light-8);
        margin-left: 10px;

        span {
          line-height: 20px;
          display: inline-block;
          margin-left: 8px;
          color: var(--next-bg-menuBar-light-1);
        }

        .tips {
          font-weight: bold;
          color: var(--next-bg-menuBar-light-1);
          margin-left: 2px;
        }

        &:hover {
          background: var(--el-color-primary-light-8);
        }
      }

      .title {
        font-weight: bold;
      }

      .right-card-item {
        margin-top: 15px;

        .action-time {
          color: var(--el-color-info);
        }
      }
    }
  }

  .base-cell {
    color: var(--el-text-color-regular);
    font-size: 12px;

    &:last-child {
      margin-right: 0;
    }

    span:first-child {
      margin-right: 5px;
    }

    .base-tips {
      display: inline-block;
      text-align: right;
      font-size: var(--el-form-label-font-size);
      color: var(--el-text-color-regular);
    }
  }

  .card-item {
    margin-bottom: 20px;

    .card-center {
      .base-tips {
        width: 90px;
        display: inline-block;
        text-align: right;
        padding-right: 5px;
      }

      .label-card-content {
        flex: 1;
        overflow: hidden;
      }
    }

    :deep(.el-tag__content) {
      width: 100%;
    }
  }

  .base-black {
    color: var(--next-bg-menuBar-light-1);
    margin-top: 8px;
  }

  .action-cell {
    flex: 1;
    cursor: pointer;

    .action-top {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--el-color-info);

      .action-tips {
        margin-left: 3px;
        font-size: 13px;
      }
    }

    .action-data {
      text-align: center;
      margin-top: 10px;
      font-size: 16px;
      font-weight: bold;
    }

    &:hover {
      color: var(--el-color-primary);

      .action-top {
        color: var(--el-color-primary-light-4);
      }
    }
  }

  .fixed-right {
    position: fixed;
    right: 20px;
    bottom: 10px;
    z-index: 999;

    .fixed-cell {
      background: var(--next-bg-topBar);
      border-radius: 50%;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--el-color-primary);
      font-size: 25px;
      box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.06) 0 1px 2px 0;
      margin-top: 10px;
    }
  }

  .tag-name {
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    display: block;
  }

  .stage-list {
    flex: 1;
  }

  .card-action {
    :deep(.el-tag) {
      cursor: pointer;
    }

    .arrow {
      display: flex;
      align-items: center;
      height: 20px;
      transition: .2s;
      cursor: pointer;
      margin-top: 10px;
      color: var(--el-color-primary-light-6);
      font-size: 20px;

      &:hover {
        color: var(--el-color-primary);
      }
    }
  }
}
</style>
<style lang="scss">
.customer-detail-drawer {
  overflow: unset;
  position: fixed;
  background: var(--next-bg-main-color);
}

.tabs-list {
  position: absolute;
  top: 90px;
  left: -50px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  overflow: auto;
  max-height: 100%;

  .close-btn {
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--el-color-primary);
    padding: 10px 0;
    border-radius: 5px 0 0 5px;
  }
}

.action-popper {
  background: transparent !important;
  position: relative;

  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--el-color-primary-light-9);
    opacity: .8;
    filter: grayscale(100%);
  }

  .el-popper__arrow::before {
    background: var(--el-color-primary-light-9) !important;
    opacity: .8;
    filter: grayscale(100%);
  }

  .sale-title {
    color: var(--el-text-color-primary);
  }
}

.my-empty {
  width: 100%;
  height: 80px;
  padding-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  p {
    font-size: var(--el-font-size-base);
    color: var(--el-text-color-secondary);
  }

  button {
    margin-top: 20px;
  }

}
</style>
